<template>
	<view class="coupon_detail">
		<view class="coupon_detail_price">
			<view v-if="couponConfig.type === 1" class="coupon_detail_price_detail">
				<view class="coupon_detail_price_unit">￥</view>
				<view class="coupon_detail_price_num">{{ couponConfig.couponAmount }}</view>
			</view>
			<view v-if="couponConfig.type === 2" class="coupon_detail_price_detail">
				<view class="coupon_detail_price_num">{{ couponConfig.discount }}折</view>
			</view>
			<view v-if="couponConfig.type === 3" class="coupon_detail_price_detail">
				<view class="coupon_detail_price_unit">赠</view>
				<view class="coupon_detail_price_num">{{ couponConfig.giftAmount }}</view>
			</view>
			<view>满{{ couponConfig.couponLimit }}元可用</view>
		</view>
		<view class="coupon_detail_desc">
			<view class="coupon_detail_desc_title">{{ couponConfig.name }}</view>
			<view class="coupon_detail_desc_time">有效期至{{ couponConfig.expire }}</view>
		</view>
		<view v-if="selectTap === '1'" @tap="doAction" class="coupon_detail_able coupon_detail_action">
			<view>
				立即
			</view>
			<view>
				领取
			</view>
		</view>
		<view v-if="selectTap === '2'" @tap="toWallet" class="coupon_detail_able coupon_detail_action">
			<view>
				立即
			</view>
			<view>
				使用
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	props: {
		couponConfig: {
			type: Object,
			default: {
			},
		},
		selectTap: {
			type: String,
			default: {
			},
		},
	},
	mounted() { },
	onLoad() {
	},
	methods: {
		doAction() {
			this.$emit('couponAction', this.couponConfig);
		},
		toWallet() {
			uni.switchTab({
				url: '/pages/index/index',
			})
		}
	}
}
</script>

<style scoped>
.coupon_detail {
	display: flex;
	background-color: #F6F6F6;
	height: 190rpx;
	margin: 30rpx;
	border-radius: 10rpx;
}

.coupon_detail_desc {
	flex: 1;
	padding-top: 50rpx;
	text-align: center;
}

.coupon_detail_desc_title {
	font-size: 30rpx;
	margin-bottom: 10rpx;
}

.coupon_detail_desc_time {
	font-size: 24rpx;
	color: #999999;
}

.coupon_detail_price {
	flex: 0 0 240rpx;
	color: #f25500;
	padding-top: 20rpx;
	box-sizing: border-box;
	text-align: center;
}

.coupon_detail_price_detail {
	display: flex;
	margin-bottom: 10rpx;
	align-items: baseline;
	text-align: center;
	justify-content: center;
	padding-right: 10rpx;
}

.coupon_detail_price_unit {
	font-size: 30rpx;
}

.coupon_detail_price_num {
	font-size: 60rpx;
}

.coupon_detail_icon {
	width: 99rpx;
	height: 190rpx;
}

.coupon_detail_able {
	background: url('https://test-1313267814.cos.ap-beijing.myqcloud.com/upload/640979b7e4b051b50df6a113.png') no-repeat center center;
	background-size: 99rpx 190rpx;
}

.coupon_detail_get {
	background: url('https://test-1313267814.cos.ap-beijing.myqcloud.com/upload/640979eee4b051b50df6a114.png') no-repeat center center;
	background-size: 99rpx 190rpx;
}

.coupon_detail_used {
	background: url('https://test-1313267814.cos.ap-beijing.myqcloud.com/upload/640979eee4b051b50df6a114.png') no-repeat center center;
	background-size: 99rpx 190rpx;
}

.coupon_detail_expire {
	background: url('https://test-1313267814.cos.ap-beijing.myqcloud.com/upload/63e9feb1e4b00d85c9c6876e.png') no-repeat center center;
	background-size: 99rpx 190rpx;
}

.coupon_detail_action {
	color: #fff;
	width: 99rpx;
	height: 190rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>
